<template>
  <div class="app-user-manage">
    <h2>APP用户管理</h2>
    <div class="toolbar">
      <el-input v-model="query.account" placeholder="账号搜索" style="width:200px;margin-right:12px;" />
      <el-button type="primary" @click="load">查询</el-button>
      <el-button @click="openAdd">新增</el-button>
    </div>
    <el-table :data="list" style="width:100%;margin-top:12px;">
      <el-table-column prop="userId" label="ID" width="80" />
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="statusFlag" label="状态" width="100" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" link @click="openEdit(row)">编辑</el-button>
          <el-button type="danger" link @click="onDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="editing ? '编辑用户' : '新增用户'">
      <el-form :model="form" label-width="100px">
        <el-form-item label="账号"><el-input v-model="form.account"/></el-form-item>
        <el-form-item label="密码"><el-input v-model="form.password" type="password"/></el-form-item>
        <el-form-item label="昵称"><el-input v-model="form.nickname"/></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.statusFlag" style="width:160px;">
            <el-option label="启用" value="Y" />
            <el-option label="禁用" value="N" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { AppUserApi } from './api/AppUserApi'

export default {
  name: 'AppUserManage',
  data() {
    return {
      query: { account: '', pageNo: 1, pageSize: 10 },
      list: [],
      dialogVisible: false,
      editing: false,
      form: { userId: null, account: '', password: '', nickname: '', statusFlag: 'Y' },
    }
  },
  created() {
    this.load()
  },
  methods: {
    async load() {
      const res = await AppUserApi.page(this.query)
      if (res && res.success) {
        this.list = res.data.records || []
      }
    },
    openAdd() {
      this.editing = false
      this.form = { userId: null, account: '', password: '', nickname: '', statusFlag: 'Y' }
      this.dialogVisible = true
    },
    openEdit(row) {
      this.editing = true
      this.form = { userId: row.userId, account: row.account, password: '', nickname: row.nickname, statusFlag: row.statusFlag }
      this.dialogVisible = true
    },
    async onSave() {
      const api = this.editing ? AppUserApi.edit : AppUserApi.add
      const res = await api(this.form)
      if (res && res.success) {
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.load()
      } else {
        this.$message.error(res?.message || '保存失败')
      }
    },
    async onDelete(row) {
      const res = await AppUserApi.delete({ userId: row.userId })
      if (res && res.success) {
        this.$message.success('删除成功')
        this.load()
      } else {
        this.$message.error(res?.message || '删除失败')
      }
    },
  },
}
</script>

<style scoped>
.app-user-manage { padding: 16px; }
.toolbar { margin-bottom: 12px; }
</style>